<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card shadow="hover">
					<template #header>
						<div class="clearfix">
							<span>基础信息</span>
						</div>
					</template>
					<div class="info">
						<div class="info-image" @click="showDialog" title="点击切换头像">
							<el-avatar :size="100" :src="`/src/assets/img/user/${getfrom.image}.webp`" fit="contain" />
						</div>
						<div class="info-name">{{ getfrom.username }}</div>
					</div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card shadow="hover">
					<template #header>
						<div class="clearfix">
							<span>个人信息</span>
						</div>
					</template>
					<el-form label-width="90px">
						<el-form-item label="用户名: "> {{ getfrom.username }} </el-form-item>
						<el-form-item label="昵称: "> {{ getfrom.nickname }} </el-form-item>
						<el-form-item label="账户等级: ">
							<el-tag v-if="getfrom.status === 2">超级管理员</el-tag>
							<el-tag type="success" v-else-if="getfrom.status === 1">管理员</el-tag>
							<el-tag type="info" v-else-if="getfrom.status === 0">普通用户</el-tag>
						</el-form-item>
						<el-form-item label="用户id: ">
							{{ getfrom.id }}
						</el-form-item>
						<el-form-item lable="账户操作: ">
							<el-button type="primary" @click="showDialog1">修改个人信息</el-button>

							<el-dialog title="个人信息修改" v-model="dialogFormVisible">
								<el-form label-position="left" label-width="80px" :rules="addRules" :model="newfrom"
									ref="addRef">
									<el-form-item label="用户名" prop="username" style="margin-bottom: 20px;">
										<el-input v-model="newfrom.username" placeholder="用户名"></el-input>
									</el-form-item>
									<el-form-item label="用户密码" prop="oldPassword" style="margin-bottom: 20px;">
										<el-input placeholder="用户密码" v-model="newfrom.oldPassword"></el-input>
									</el-form-item>
									<el-form-item label="新密码" prop="newpassword" style="margin-bottom: 20px;">
										<el-input placeholder="设置新密码" v-model="newfrom.newpassword"></el-input>
									</el-form-item>
									<el-form-item label="用户昵称" prop="nickname" style="margin-bottom: 20px;">
										<el-input v-model="newfrom.nickname"></el-input>
									</el-form-item>
									<el-form-item label="用户头像" prop="image">
										<el-select v-model="newfrom.image" placeholder="用户头像" class="handle-select mr10">
											<el-option :key="index" :label="item" :value="item" v-for="(item, index) in 8">
												<el-image style="float: left;width: 30px; height: 30px"
													class="table-td-thumb" :src="`/src/assets/img/user/${item}.webp`"
													:z-index="10" preview-teleported>
												</el-image>
												<span style="float: right;font-size: 13px;">{{ item }}</span>
											</el-option>
										</el-select>
									</el-form-item>
								</el-form>
								<template #footer>
									<span class="dialog-footer">
										<el-button @click="onopen">取 消</el-button>
										<el-button type="primary" @click="onclose(addRef)">确 定</el-button>
									</span>
								</template>
							</el-dialog>
						</el-form-item>
					</el-form>
				</el-card>
			</el-col>
		</el-row>
		<el-dialog title="选择头像" v-model="dialogVisible" width="600px">
			<div class="imagedec">
				<div v-for="(item, index) in  8 " :key="index" :class="{ 'xuan1': im == index, 'xuan': im != index }">
					<el-image style="float: left;width: 80px;margin: 10px 20px;" :src="`/src/assets/img/user/${item}.webp`"
						@click="xuanzhong(item, index)">
					</el-image>
				</div>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" style="margin-right: 50px;" @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" style="margin-right: 50px;" @click="updataimage(im)">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="user">
import { computed, reactive, ref } from 'vue';
import 'cropperjs/dist/cropper.css';
import { updateSelf, page } from '../api/user';
import { useUserStore } from '../store/user';
import { FormRules } from 'element-plus/es/tokens/form';
import { FormInstance } from 'element-plus/es/components/form';
import { ElMessage } from 'element-plus';

const im = ref(0)
const dialogFormVisible = ref(false)
const getfrom: any = useUserStore().userInfo
const img1 = ref(getfrom.image)
const dialogVisible = ref(false);
const tableLoading = ref(false);
const addRef = ref<FormInstance>()
const newfrom = reactive({
	username: '',
	oldPassword: '',
	newpassword: '',
	nickname: '',
	image: 0
})
const onclose = (formEl: any) => {
	formEl.validate((valid: boolean) => {
		if (!valid) return;
		tableLoading.value = true
		const params: any = {
			username: newfrom.username,
			oldPassword: newfrom.oldPassword,
			password: newfrom.newpassword,
			nickname: newfrom.nickname,
			image: String(newfrom.image)
		}
		updateSelf(params).then((res: any) => {
			if (res.code !== 200) return ElMessage.error(res.msg || '更新失败')
			ElMessage.success('更新成功')
			getfrom.username = newfrom.username
			getfrom.nickname = newfrom.nickname
			getfrom.image = Number(newfrom.image)
			dialogFormVisible.value = false
		}).finally(() => {
			tableLoading.value = false
		})
	})
}
const onopen = () => {
	newfrom.oldPassword = ''
	newfrom.newpassword = ''
	dialogFormVisible.value = false
}
const xuanzhong = (item: number, index: number) => {
	im.value = index;
}
const updataimage = (im: number) => {
	tableLoading.value = true
	const img1 = (im + 1).toString();
	const params = {
		image: String(img1)
	}
	updateSelf(params).then((res: any) => {
		if (res.code !== 200) return ElMessage.error(res.msg || '更新失败')
		ElMessage.success('更新成功')
		getfrom.image = Number(img1)
		dialogVisible.value = false
	}).finally(() => {
		tableLoading.value = false
	})
}
//规则
const addRules: FormRules = {
	username: [{ required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 18, message: '请输入3-18个字符', trigger: 'blur' }],
	oldPassword: [{ required: true, message: '请输入用户密码', trigger: 'blur' },],
	newpassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }, { min: 3, max: 18, message: '请输入3-18个字符', trigger: 'blur' }],
	nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }, { min: 2, max: 10, message: '请输入2-10个字符', trigger: 'blur' }],
	image: [{ required: true, message: '请选择用户头像', trigger: 'blur' }],
};
//获取个人信息
const getData = () => {
	console.log(getfrom);
	tableLoading.value = true
	const params = {
		...getfrom
	}
	page(params).then((res: any) => {
		const data = res;
		getfrom.value = data.data
	}).finally(() => tableLoading.value = false)
}
getData();
// 打开相关弹窗
const showDialog = () => {
	dialogVisible.value = true;
};
const showDialog1 = () => {
	newfrom.username = getfrom.username,
		newfrom.nickname = getfrom.nickname,
		newfrom.image = Number(getfrom.image)
	dialogFormVisible.value = true;

}
</script>
<style scoped>
.xuan1 {
	border: blue 2px solid;
}

.xuan {
	border: white 2px solid;
}

.imagedec {
	box-sizing: content-box;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.info {
	text-align: center;
	padding: 35px 0;
}

.info-image {
	position: relative;
	margin: auto;
	width: 100px;
	height: 100px;
	background: #f8f8f8;
	border: 1px solid #eee;
	border-radius: 50px;
	overflow: hidden;
}

.info-edit {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.info-edit i {
	color: #eee;
	font-size: 25px;
}

.info-image:hover .info-edit {
	opacity: 1;
}

.info-name {
	margin: 15px 0 10px;
	font-size: 24px;
	font-weight: 500;
	color: #262626;
}

.crop-demo-btn {
	position: relative;
}

.crop-input {
	position: absolute;
	width: 100px;
	height: 40px;
	left: 0;
	top: 0;
	opacity: 0;
	cursor: pointer;
}
</style>
